<template>
  <div>
    <div v-if="orderList && orderList.length > 0">
      <div style="border-bottom: 1px solid #EEEEEE;text-align: left;" v-for="oi in orderList" v-bind:key="oi.id">
        <table style="width: 100%;">
          <tr>
            <td colspan="3" class="asheng-margin"></td>
          </tr>
          <tr>
            <td colspan="2" class="asheng-good-name">{{ oi.goodName ? oi.goodName : "" }}</td>
            <td class="asheng-order-detail-btn"><span @click="onClickOrderDetail(oi)">详情<van-icon name="arrow" /></span></td>
          </tr>
          <tr>
            <td colspan="3" class="asheng-margin" style="height: 0px;"></td>
          </tr>
          <tr>
            <td>
              <div :id="'cardname' + oi.id" @click="copyOrderContent(oi.cardName, 'cardname' + oi.id)">
                <span class="asheng-title">姓名：</span>
                <span class="asheng-val">{{ oi.cardName ? oi.cardName : "" }}</span>
              </div>
              <div :id="'phone' + oi.id" @click="copyOrderContent(oi.receiverPhone, 'phone' + oi.id)">
                <span class="asheng-title">电话：</span>
                <span class="asheng-val">{{ oi.receiverPhone ? oi.receiverPhone : "" }}</span>
              </div>
              <div :id="'recommend' + oi.id" @click="copyOrderContent(oi.recommendNickName, 'recommend' + oi.id)">
                <span class="asheng-title">来源：</span>
                <span class="asheng-val">{{ oi.recommendNickName ? oi.recommendNickName : "" }}</span>
              </div>
            </td>
            <td>
              <div :id="'orderid' + oi.id" @click="copyOrderContent(oi.gthOrderId, 'orderid' + oi.id)">
                <span class="asheng-title">订单ID：</span>
                <span class="asheng-val">{{ oi.gthOrderId ? oi.gthOrderId : "无" }}</span>
              </div>
              <div :id="'orderno' + oi.id" @click="copyOrderContent(oi.orderNo, 'orderno' + oi.id)">
                <span class="asheng-title">外部ID：</span>
                <span :title="oi.orderNo" class="asheng-val">{{ oi.orderNo ? oi.orderNo.substr(0, 10) +
                                    "..." :
                                    ""
                                }}</span>
              </div>
              <div>
                <span class="asheng-val">{{ oi.gthCreatedAt ? oi.gthCreatedAt : "" }}</span>
              </div>
            </td>
            <td style="width: 60px;">
              <div class="asheng-order-status">
                <img v-if="oi.activateStatus === 100 || oi.activateStatus === 200" src="../../assets/image/comm/activied.png">
                <template v-else>
                  <img v-if="oi.orderStatus === 99 || oi.orderStatus === 500" src="../../assets/image/comm/not_s.png">
                  <img v-else-if="oi.orderStatus === 550" src="../../assets/image/comm/yes_s.png">
                  <img v-else-if="oi.orderStatus === -99 || oi.orderStatus === -460" src="../../assets/image/comm/fail.png">
                  <img v-else src="../../assets/image/comm/other.png">
                </template>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3" class="asheng-margin"></td>
          </tr>
        </table>
      </div>

    </div>
    <div v-else>
      <van-empty description="暂无数据" />
      <div style="height: 500px;"></div>
    </div>
    <div style="color: #969799;line-height: 50px;text-align: center;font-size: 13px;" v-if="finished && orderList.length > 0">没有更多了
    </div>

  </div>
</template>

<script>
import { showToast } from 'vant'
import { listOrder } from '@/api/admin/order'
export default {
  name: 'OrderItem',
  props: {
    status: {
      type: Number,
    },
    searchKey: {
      type: String,
      default: '',
    },
    recommendUserId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      orderList: [],
      queryPara: {
        pageNum: 1,
        pageSize: 15,
      },
      total: 0,
      maxPage: 0,
      loading: false,
      finished: false,
    }
  },
  created() {
    this.initCurrPage()
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    initCurrPage() {
      if (this.status != 999) {
        this.queryPara.orderStatus = this.status
      }
      if (this.recommendUserId) {
        this.queryPara.recommendUserId = this.recommendUserId
      }

      this.queryPara.searchValue = this.searchKey
      this.getOrderList()
    },
    getOrderList() {
      listOrder(this.queryPara).then((res) => {
        if (res.rows) {
          this.orderList = this.orderList.concat(res.rows)
          this.total = res.total
          this.getMaxPage()
          if (this.maxPage <= this.queryPara.pageNum) {
            this.finished = true
          }
        } else {
          this.total = 0
          this.finished = true
        }
      })
    },
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight
      //console.info("距离顶部的距离", scrollTop)
      //console.info("可视区的高度", windowHeight)
      //console.info("滚动条的总高度", scrollHeight)
      //滚动条到底部的条件
      if (scrollTop + windowHeight + 2 >= scrollHeight) {
        //到了这个就可以进行业务逻辑加载后台数据了
        this.onLoadList()
      }
    },
    onLoadList() {
      if (!this.finished) {
        this.getMaxPage()

        if (this.queryPara.pageNum < this.maxPage) {
          this.queryPara.pageNum++
        }

        this.getOrderList()
        console.info('maxPage', this.maxPage)
      } else {
        console.info('已完成所有数据的加载')
      }
    },
    getMaxPage() {
      let maxPage = Math.floor(this.total / this.queryPara.pageSize)
      let remainder = this.total % this.queryPara.pageSize
      if (remainder > 0) {
        this.maxPage = maxPage + 1
      } else {
        this.maxPage = maxPage
      }
    },
    copyOrderContent(content, idName) {
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(content)
        showToast('复制成功')
      } else {
        window.getSelection().removeAllRanges()
        const questionToCopy = document.querySelector('#' + idName)
        const range = document.createRange()
        range.selectNode(questionToCopy)
        window.getSelection().addRange(range)
        try {
          const successful = document.execCommand('copy')
          if (successful) {
            showToast('复制成功')
          }
        } catch (error) {
          showToast('复制失败')
        }
      }
    },
    onClickOrderDetail(item) {
      this.$emit('onClickOrderDetail', item)
    },
  },
}
</script>
<style scoped>
table,
tr,
td {
  border: 0px;
}

.asheng-good-name {
  font-size: 14px;
  color: #000000;
  font-weight: normal;
}

.asheng-title {
  color: #666;
  font-size: 13px;
  font-weight: normal;
}

.asheng-val {
  color: #000000;
  font-size: 13px;
  font-weight: normal;
}

.asheng-order-status {
  height: 60px;
  width: 60px;
}

.asheng-order-status img {
  height: 60px;
  width: 60px;
}

.asheng-margin {
  height: 5px;
}

.asheng-order-detail-btn {
  font-size: 14px;
  color: #3682ff;
  font-weight: normal;
  cursor: pointer;
  text-align: right;
}
</style>

